<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
   <title>仿美团-外卖点餐系统</title>
   <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath }/css/jquery.toastmessage.css">
	<script type="text/javascript" src="${pageContext.request.contextPath }/js/jquery-2.1.4.min.js"></script>
	<script type="text/javascript" src="${pageContext.request.contextPath }/js/jquery.toastmessage.js"></script>
    <style type="text/css">
        *{
            margin: 0px;
            padding: 0px;
        }
        
        .head img{
        	width: 100%;
        	height:7%;
        }
        .reg_divide{
            height: 1px;
            background-color: #FF0000;
        }
        .reg_end{
            margin-top: 65px;
            background-color: #f0f0f0;
        }
        .reg_form{
            text-align: center;
            margin-top: 60px;
        }
        .reg_form form{
            margin-top: 20px;
            color: #8a8a8a;
        }
        #reg_input_sex1{
            width: 20px;
        }
        #reg_input_sex2{
            width: 20px;
        }
        .reg_input_email{
            margin-top: 10px;
            width: 304px;
            height: 28px;
            border-radius: 3px;
        }
        .reg_input_nickname{
            margin-top: 10px;
            width: 304px;
            height: 28px;
            border-radius: 3px;
        }
        .reg_input_pwd{
            margin-top: 10px;
            width: 304px;
            height: 28px;
            border-radius: 3px;
        }
        .reg_input_check_ped{
            margin-top: 10px;
            width: 304px;
            height: 28px;
            border-radius: 3px;
        }
        .reg_input_checkCode{
            margin-top: 10px;
            width: 304px;
            height: 28px;
            border-radius: 3px;
        }
        .reg_input_tel{
            margin-top: 10px;
            width: 304px;
            height: 28px;
            border-radius: 3px;
        }
        .reg_checkCode{
            margin-top: 20px;
        }
        .reg_checkCode a{
            text-decoration: none;
            font-size: 12px;
            color: #828282;
            font-family: 微软雅黑;
            margin-left: 10px;
        }
        .reg_btn{
            border: none;
            color: #fff;
            width: 120px;
            height: 40px;
            background-color: #669900;
            border-radius: 3px;
            margin-top: 30px;
            margin-left: 80px;
            font-size: 14px;
        }
        .s1{
           font-size: 14px;
            color: red;
        }

    </style>
    <script type="text/javascript">
    
    $(document).ready(function(){
    	$(".reg_btn").click(function(){
    		
    		var userName = $("#userName").val().trim();
    		var password = $("#password").val().trim();
    		var passwordAgain = $("#passwordAgain").val().trim();
    		
    		var $userNameMsg = $("#userNameMsg");
    		var $passwordMsg = $("#passwordMsg");
    		var $passwordAgainMsg = $("#passwordAgainMsg");
    		
    		//基本验证
    		var flagOk = true;
    		if(userName == ""){
    			$userNameMsg.text("用户名不能为空");
    			flagOk = false;
    		}else{
	            $userNameMsg.text("");
    		}
            
    		if(password == ""){
    			$passwordMsg.text("密码不能为空");
    			flagOk = false;
    		}else{
    			var reg=/^[a-zA-Z0-9]\w{5,17}$/;
	            if(!reg.test(password)){
	                $passwordMsg.text("注意:长度在6~18之间，只能包含字母、数字和下划线");
	               	flagOk = false;
	            }else{
	            	$passwordMsg.text("");
	            }
    		}
    		
    		if(passwordAgain == ""){
    			$passwordAgainMsg.text("确认密码不能为空");
    			flagOk = false;
    		}else if(passwordAgain != password){
	            $passwordAgainMsg.text("两次密码不一致");
	            flagOk = false;
            }else if(passwordAgain == password){
            	$passwordAgainMsg.text("");
            }
          
            if(flagOk == false){return;}
            alert(userName+","+password+","+passwordAgain);
            var url = "${pageContext.request.contextPath }/admin/regist";
			var params = $("form").serialize();
            $.post(url, params, function(data, status){
            	
            	if(status == "success"){
            		alert(data);
            		if(data == 1){
            			$().toastmessage("showSuccessToast", data.msg);
            			location.href="${pageContext.request.contextPath }/admin/login";
            		}else{
            			$().toastmessage('showErrorToast', data.msg);
            		}
            		return;
            	}
            	$().toastmessage('showErrorToast', '服务器故障');
            });
    		
    	});
    	
    });
    </script>
  </head>
  <body>
     <div class="head">
        <img src="${pageContext.request.contextPath }/images/reg_head.png" >
    </div>
    <div class="reg_divide"></div>
    <div class="reg_form">
        <form action="javascript:;" method="post">
            &nbsp;&nbsp;用户名 <input type="text" id="userName" name="adminName" class="reg_input_email">
                        <br>
                        <span class="s1" id="userNameMsg"></span>
                        <br>
       
            &nbsp;&nbsp;密码 <input type="password" name="password" class="reg_input_pwd" id="password">
                        <br>
                        <span class="s1" id="passwordMsg"></span>
                        <br>
            &nbsp;&nbsp;确认 <input type="password" name="passwordAgain" class="reg_input_check_ped" id="passwordAgain"><br>
                        <span class="s1" id="passwordAgainMsg"></span>
                        <br>
            <input type="submit" value="注  册" class="reg_btn">
        </form>
    </div>
    <div class="reg_end">
        <img src="${pageContext.request.contextPath }/images/reg_end.png">
    </div>
  </body>
</html>
